<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备概览</span>
        <el-tooltip content="设备概览" placement="top">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div class="text item">
        <div class="item_txt">
          <img src="@/assets/img/gateway.png" />
          <span class="lan"></span>
        </div>
        <div class="item_txt">
          <div class="item_box">
            <div class="lorawan">{{ devictObj.LoRaWAN.total }}</div>
            <div class="lorawan_s">LoRaWAN</div>
            <div class="lorawan_s">网关</div>
          </div>
          <span class="lan"></span>
        </div>
        <div class="item_txt">
          <div class="item_box">
            <div class="lorawan">{{ devictObj.LoRaPP.total }}</div>
            <div class="lorawan_s">LoRaPP</div>
            <div class="lorawan_s">网关</div>
          </div>
          <span class="lan"></span>
        </div>
        <div class="item_txt">
          <div class="item_box">
            <div class="lorawan">{{ devictObj.group }}</div>
            <div class="lorawan_s">群组</div>
          </div>
          <span class="lan"></span>
        </div>
        <div class="item_txt">
          <i class="iconfont icon-yalichuanganqi myfont"></i>
          <span class="lan"></span>
        </div>
        <div class="item_txt">
          <div class="item_box">
            <div class="lorawan">{{ devictObj.sensor.total }}</div>
            <div class="lorawan_s">传感器节点</div>
          </div>
        </div>
      </div>
    </el-card>
</template>

<script>
//调用后台接口
import { $deviceCount } from "@/api/index.js";
export default {
  name: "Equipment",
  data() {
    return {
      devictObj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    $deviceCount().then((res) => {
      this.devictObj = res.data.data;
    });
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 52%;
}
.text {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  .item_txt {
    display: flex;
    align-items: center;
    width: 15%;
    .myfont {
      font-size: 50px;
      margin-left: -30px;
      color: #91a8bf;
    }
    img {
      width: 50px;
    }
    .lan {
      display: inline-block;
      width: 1.5px;
      height: 50px;
      background: rgb(236, 232, 232);
      margin-left: 15px;
    }
    .item_box {
      font-size: 12px !important;
      color: #000;
      .lorawan {
        font-size: 20px !important;
        font-weight: 600;
      }
      .lorawan_s {
        font-weight: 600;
        color: #333;
      }
    }
  }
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  font-size: 13px;
  font-weight: bold;
}
.clearfix:after {
  clear: both;
}

</style>